<template>
    <div class="app-container" @keyup.enter="page" style="display: flex; flex-direction: column">
        <!--    查询项-->
        <el-drawer
            title="查询"
            :visible.sync="drawer.visible"
            :direction="drawer.direction"
            :before-close="queryClose"
            append-to-body
        >
            <el-form :model="params" label-width="100px" ref="queryForm" @keyup.enter.native="page">
                <el-row type="flex">
                    <el-col :span="12">
                        <el-form-item prop="name" label="分类名称">
                            <el-input v-model="params.name" type="text" clearable></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item prop="parentId" label="父级id">
                            <el-input v-model="params.parentId" type="text" clearable></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item prop="remark" label="备注">
                            <el-input v-model="params.remark" type="text" clearable></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
        </el-drawer>
        <div class="z-position">
            <div class="z-position_left">
                <el-button type="primary" size="small" @click="handleModelInsert">新增</el-button>
                <el-button type="danger" size="small" @click="handleModelDel">删除</el-button>
            </div>
            <div class="z-position_right">
                <el-button type="primary" icon="el-icon-search" size="medium" @click="page">查询</el-button>
                <el-button type="primary" icon="el-icon-refresh" size="medium" @click="reset">重置</el-button>
                <el-button circle icon="el-icon-d-arrow-left" @click="showSearch"></el-button>
            </div>
        </div>

        <el-container>
            <el-aside width="250px" style="border:1px solid #EBEEF5;margin-top: 20px;">
                <el-tree
                    v-loading="view.typeTreeLoading"
                    :data="map.productTypeTrees"
                    default-expand-all
                    :props="treeProps"
                    node-key="id"
                    default-expand-alls
                    @node-click="nodeClick"
                    :expand-on-click-node="false"
                    style="padding: 10px;overflow-x: auto">
                    <span class="custom-tree-node" slot-scope="{ node, data }">
                        <span style="padding-right: 15px;">{{ data.name }}</span>
                        <i class="el-icon-circle-plus-outline" @click="addType(node)" style="color:#409EFF;"></i>
                        <i v-if="data.id != 0" class="el-icon-circle-close" @click="delType(node)" style="color:#F56C6C;"></i>
                        <i v-if="data.id != 0" class="el-icon-circle-check" @click="editType(node)" style="color:#E6A23C;"></i>
                    </span>
                </el-tree>
            </el-aside>
            <el-main>        <!--    表格-->
                <el-table :data="table.data" ref="table" border fit stripe @row-click="handleRowClick" @selection-change="handleSelectionChange">
                    <el-table-column prop="name" label="型号名称"/>
                    <el-table-column prop="typeName" label="所属分类"/>
                    <el-table-column prop="remark" label="备注"/>
                    <el-table-column label="操作" width="120px" fixed="right">
                        <template #default="scope">
                            <!--           阻止冒泡-->
                            <div @click.stop>
                                <el-button @click="handleModelEdit(scope)" type="text">修改</el-button>
                                <el-button @click="handleModelDetail(scope)" type="text">详情</el-button>
                            </div>
                        </template>
                    </el-table-column>
                </el-table>
                <el-pagination
                    layout="sizes,total,prev, pager, next"
                    @size-change="page"
                    :page-sizes="[10, 20, 50, 100]"
                    :total="pagination.total"
                    :current-page.sync="pagination.pageOn"
                    @current-change="page"
                    @prev-click="page"
                    @next-click="page"
                    :page-size.sync="pagination.pageSize"
                    style="flex-basis: 32px; flex-grow: 0;flex-shrink: 0;text-align: center"
                    width="100"
                />
            </el-main>
        </el-container>

        <!--    弹窗-->
        <el-dialog :title="formDialog.title" :visible.sync="formDialog.visible" append-to-body :before-close="formClose">
            <el-form :model="formData" label-width="80px" ref="form" :rules="rules">
                <el-row>
                    <el-col :span="12">
                        <el-form-item prop="name" label="分类名称">
                            <el-input v-model="formData.name" type="text" clearable></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item prop="nodeParentName" label="父级名称">
                            <el-input v-model="temp.nodeParentName" type="text" clearable :disabled="true"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item prop="remark" label="备注">
                            <el-input v-model="formData.remark" type="text" clearable></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <template #footer>
                <el-button @click='formSave' type="primary">保存</el-button>
                <el-button @click="formClose">关闭</el-button>
            </template>
        </el-dialog>

        <el-dialog :title="view.modelFormTitle" :visible.sync="view.modelFormVisible" append-to-body :before-close="modelFormClose">
            <el-form :model="modelFormData" label-width="80px" ref="modelForm" :rules="modelRules">
                <el-row>
                    <el-col :span="12">
                        <el-form-item prop="name" label="父级名称">
                            <el-input v-model="temp.clickNodeData.name" type="text" clearable :disabled="true"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item prop="name" label="型号名称">
                            <el-input v-model="modelFormData.name" type="text" clearable></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item prop="remark" label="备注">
                            <el-input v-model="modelFormData.remark" type="text" clearable></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <template #footer>
                <el-button @click='modelFormSave' type="primary">保存</el-button>
                <el-button @click="modelFormClose">关闭</el-button>
            </template>
        </el-dialog>

        <el-dialog :title="detail.title" :visible.sync="detail.visible" :before-close="detailModelClose" append-to-body>
            <el-descriptions direction="horizontal" border :column="2">
                <el-descriptions-item label="型号名称">{{ detail.data.name }}</el-descriptions-item>
                <el-descriptions-item label="所属分类">{{ detail.data.typeName }}</el-descriptions-item>
                <el-descriptions-item label="备注">{{ detail.data.remark }}</el-descriptions-item>
            </el-descriptions>
        </el-dialog>
    </div>
</template>

<script src="./index.js"/>

<style scoped>
.z-position{
    height: 54px;
    line-height: 54px;
}
.z-position_left{
    width: 50%;
    float: left;
}
.z-position_right{
    width: 50%;
    float: left;
    text-align: right;
}
/deep/ .el-tree-node__content{
    height: 32px;
}
</style>
